5-1 React-Router章导学
传统路由 vs 前端路由
传统路由（Server-Side Routing）
在传统 Web 开发中，浏览器的 URL 与服务器上的文件路径一一对应。用户访问某个路径时，服务器直接返回该路径下的 HTML、CSS、JS 文件。路由的本质是导航到服务器上不同的文件夹。
用户访问 /about → 服务器返回 /pages/about.html
用户访问 /contact → 服务器返回 /pages/contact.html
text
每次页面跳转都会触发一次完整的页面刷新，用户体验较差。
前端路由（Client-Side Routing）
前后端分离架构兴起后，路由职责从服务器转移到了前端。JavaScript 拦截 URL 变化，在客户端完成页面切换，无需向服务器请求新的 HTML 文件。
用户访问 /about → JS 拦截 → 渲染 About 组件（不刷新页面）
用户访问 /contact → JS 拦截 → 渲染 Contact 组件（不刷新页面）
text
后端变得更纯粹——只负责提供 API 接口和响应数据，前端负责数据渲染和路由管理。
SPA（单页面应用）的崛起
前端路由是 SPA（Single Page Application）的核心基础。三大前端框架（React、Vue、Angular）都基于 SPA 架构，带来了显著的优势：
| 优势 | 说明 |
|---|---|
| 用户体验 | 页面切换无刷新，接近原生应用的流畅感 |
| 前后端分离 | 后端专注 API，前端专注渲染，职责清晰 |
| 多端支持 | 后端 API 可以同时服务 Web、移动端、桌面端 |
| 开发效率 | 前端可以独立开发和部署，不受后端发布周期限制 |
React Router 的定位
React Router 是 React 生态中最主流的路由库，负责管理 SPA 中的页面导航。它的核心功能：
- 声明式路由——通过 JSX 声明路由映射关系
- 嵌套路由——支持路由的层级嵌套
- 动态路由——支持路径参数（如
/users/:id） - 编程式导航——通过 JS 代码控制页面跳转
- 路由守卫——控制页面的访问权限
相关生态库
| 库 | 说明 |
|---|---|
react-router-dom | Web 端路由（最常用） |
react-router-native | React Native 移动端路由 |
react-router | 核心库（安装 dom/native 时自动安装） |
history | 管理浏览器会话历史的底层库 |
本章节将基于 React Router v6 进行实战讲解，涵盖路由配置、动态传参、404 处理、导航守卫等核心场景。
↑